import React, { useState, useEffect, createContext, useContext } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

const CountContext = createContext()

function Count(){
  const count = useContext(CountContext)  //一句话就可以得到count
  return (<h2>{count}</h2>)
}

function Index() {
  // 这里是绑定一个副作用
  useEffect(()=>{
    console.log('useEffect=>老弟，你来了！Index页面')
    // 这里返回一个函数的形式进行绑定 相当于componentWillUnmount的效果
    return ()=>{
      console.log('老弟，你走了!Index页面')
    }
  },[])
  // 这上面的[]是关键，加上[]就是当组件被销毁时才绑定，[xxx]意思是当xxx状态值发生变化时，我们才进行绑定useEffect  其余时候useEffect不生效
  return <h2>JSPang.com</h2>;
}

function List() {
  useEffect(()=>{
    console.log('useEffect=>老弟，你来了！List页面')
  })
  return <h2>List-Page</h2>;
}

function Hooks(){
    const [ count , setCount ] = useState(0);

    useEffect(()=>{
      // console.log(`useEffect=>You clicked ${count} times`)
      console.log('29useEffect')
      return ()=>{
          console.log('====================')
      }
    },[count])
    // updata时:这里不加[]的话，上面俩都生效，加[]的话都不生效。加[count]的话，count变化生效    离开该组件时:无论加不加[]都生效  生效指生效该函数，相当于生效生命周期函数

    return (
        <div>
            <h2>React Hooks 写法</h2>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            <CountContext.Provider value={count}>
              <Count />
            </CountContext.Provider>

            <Router>
                <ul>
                    <li> <Link to="/firstpage/hooks/">首页</Link> </li>
                    <li><Link to="/firstpage/hooks/list/">列表</Link> </li>
                </ul>
                <Route path="/firstpage/hooks/" exact component={Index} />
                <Route path="/firstpage/hooks/list/" component={List} />
            </Router>
        </div>
    )
}
export default Hooks;